<template>
    <div class="pl">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh()">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()" :immediate-check="false">
        <div class="cont" v-for="(item,index) in list" :key="index">
            <div class="title">
                <img :src="item.avatar"
                    alt="">
                <span>{{item.nickname}}</span>
            </div>
            <div class="spec">
                商品名：<span>{{item.infoname}}</span> 星级：<span><van-rate v-model="item.rate" :size="15" color="#ffd21e" void-icon="star" void-color="#eee" /></span>
            </div>
            <div class="text">
                {{item.message}}
            </div>
            <!-- <div class="btn">
                <div @click="flag = !flag"><van-icon name="like-o" :class="[flag ? 'red' : '']" />赞</div>
                <div><van-icon name="comment-o" />评论</div>
            </div> -->
        </div>
        </van-list>
        <div style="margin-bottom:100px"></div>
        </van-pull-refresh>
    </div>
</template>
<script>
export default {
    props: ['info_id','type'],
    data() {
        return {
            flag: false,
            evaluatelist: '',
            loading: true,
            finished: false,
            refreshing: false,
            total: '',
            list:[],
            page:1,
        }
    },
    methods: {
    async getListEvaluate() {
      let query = {
                page: 1,
                limit: 10,
                keyword: '',
                info_id:this.info_id,
                type:this.type
            };
      query.page = this.page;
      let res=await this.$frontaxios.post(this.$front.getEvaluate,query);
          if(res.code==1){
              this.loading= true;
              this.evaluatelist=res.data.list;
              this.total= res.data.total;
          }else{
              console.log('没有获取到兑换课程')
          }
    },
    async onLoad(){
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getListEvaluate();
            this.list.push(...this.evaluatelist);
            this.page++;
            this.loading = false; //不加载了，滚动底会变为true
            if (this.list.length >= this.total) {
                this.finished = true; //数据全部加载完设为true
            }
        },
    onRefresh(){
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loadingall 设置为 true，表示处于加载状态
            this.loading = true;
            this.page= 1;
            this.onLoad();
            this.$toast.success('刷新成功');
    }
    },
    async created(){
            this.onLoad();      
    }
}
</script>
<style lang='scss' scoped>
.pl {
    height: 100%;
    background-color: #F4F4F4;
}

.cont {
    background-color: #FFF;
    margin-bottom: 10px;
    height: 100px;
    width: 98%;
    padding: 10px;
    position: relative;

    .title {
        height: 30px;
        display: flex;
        line-height: 30px;
        img {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            margin: 2.5px;
        }
        .van-rate{
            margin: 6px;
        }
    }

    .spec {
        height: 30px;
        line-height: 30px;
        color: #9C9C9C;
        font-size: 13px;
    }

    .text {
        height: 100px;
    }

    .btn {
        width: 96px;
        height: 30px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        right: 30px;
    }

}

.red {
    color: red;
}
</style>
